<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>对齐</title>
</head>
<style>

.flex-container {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	width: 800px;
	height: 250px;
	background-color: lightgrey;
}

.flex-item {
	background-color: cornflowerblue;
	width: 100px;
	height: 100px;
	margin: 10px;
}
/* 如果把第一个弹性子元素上也设置右边距自动大小，看看效果 【测试发现，多个元素使用auto，则这几个元素把剩余空间平分了】*/
.flex-item:first-child {
	/* margin-right: auto; */
}
.cut{
	margin-right: auto;
}
</style>
<body>

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。<br>
以下实例在第二个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧<br><br>

<div class="flex-container">
	<div class="flex-item">flex item 1</div>
	<div class="flex-item cut">flex item 2</div>
	<div class="flex-item">flex item 3</div>
	<div class="flex-item">flex item 4</div>
	<div class="flex-item">flex item 5</div>
	
	<!-- <div class="flex-item">flex item 6</div>
	<div class="flex-item">flex item 7</div> -->
</div>

</body>
</html>
